<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-06 08:43:22
 * @LastEditors: wangwang 2723008256@qq.com
 * @LastEditTime: 2024-01-22 14:35:42
 * @FilePath: \jzjy\src\views\Login\login.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="container">
    <img src="../../assets/img/loginBg.png" alt="" />
    <div class="logo">
      <img src="../../assets/img/login_logo.png" alt="" />
    </div>
    <div class="content" v-if="fastLoginRadio == 1">
      <div class="box box1">
        <div class="title">
          <h2 @click="changeZh" class="zhanghao">账号登录</h2>
          <h2 @click="changePhone" class="duanxin">短信登录</h2>
        </div>
        <div class="right">
          <img src="../../assets/img/changeEVM.png" @click="changeSMLogin" />
        </div>
        <div class="login userLogin" v-if="loginRadio == 1">
          <el-input
            v-model="username"
            placeholder="请输入用户名"
            prefix-icon="el-icon-user-solid"
            autocomplete
            maxlength="22"
            size="large"
            clearable
            spellcheck="false"
            @focus="unFocus"
            @keyup.enter.native="zhLogin"
          ></el-input>
          <p class="errorMsg1" v-show="errorUn">{{ errorMsgUn }}</p>
          <el-input
            v-model="password"
            placeholder="请输入密码"
            show-password
            prefix-icon="el-icon-lock"
            maxlength="16"
            size="large"
            clearable
            spellcheck="false"
            @focus="pwFocus"
            @keyup.enter.native="zhLogin"
          ></el-input>
          <p class="errorMsg2" v-show="errorPw">{{ errorMsgPw }}</p>
          <span @click="goReset" class="forget">忘记密码?</span>
          <div class="submit" @click="zhLogin">登录</div>
        </div>

        <div class="login phoneLogin" v-if="loginRadio == 2">
          <el-input
            v-model="userphone"
            placeholder="请输入手机号"
            prefix-icon="el-icon-mobile"
            autocomplete
            maxlength="22"
            size="large"
            clearable
            spellcheck="false"
            @focus="pnFocus"
          ></el-input>
          <p class="errorMsg1" v-show="errorPn">{{ errorMsgPn }}</p>
          <el-input
            v-model="yzm"
            placeholder="请输入验证码"
            prefix-icon="el-icon-message"
            maxlength="100"
            size="large"
            clearable
            spellcheck="false"
            @focus="yzFocus"
          ></el-input>
          <p class="errorMsg2" v-show="errorYz">{{ errorMsgYz }}</p>
          <span class="getYzm" @click="getDx" v-if="!djsShow">获取验证码</span>
          <span class="getYzm" v-if="djsShow">重新发送 {{ countdown }}s</span>
          <span @click="goReset" class="forget">忘记密码?</span>
          <div class="submit"  @click="dxLogin">登录</div>
        </div>
      </div>
    </div>
    <div class="content" v-if="fastLoginRadio == 2">
      <div class="box box2">
        <div class="title">
          <h2 @click="changeZh" class="zhanghao">快速登录</h2>
        </div>
        <div class="right">
          <img src="../../assets/img/changeZH.png" @click="changeZhLogin" />
        </div>
        <div class="evm">
          <img :src="loginEvm" alt="" />
          <!-- <img src="../../assets/img/ewm.svg" alt="" /> -->
          <div class="sxzz" v-show="!isyouxiao"></div>
          <p class="again" v-show="!isyouxiao">
            小程序码已失效，请<a style="color: #08a579" @click="loginAgain"
              >点击重试</a
            >
          </p>
        </div>
        <p>打开微信，扫一扫完成登录</p>
        <!-- <p class="again" v-show="!isyouxiao">
          二维码已失效，请<a style="color: #08a579" @click="loginAgain"
            >点击重试</a
          >
        </p> -->
      </div>
    </div>
    <div class="bottom">
      {{copyright}} 备案号：<a href="https://beian.miit.gov.cn/" style="color:#08a579" target="blank">京ICP备18064839号-1</a>
    </div>
    <!-- 首页接受参数，判断是否更新 -->
    <el-dialog
      :visible.sync="isUpdateShow"
      width="500px"
      center
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="upDateBox">
        <h3>温馨提示</h3>
        <p>
          您好，原精准教研教学平台已迁移升级：功能更全面，体验更流畅！请使用原账号密码重新登录，微信小程序同步推出，扫码即可使用。任何疑问可以联系我们的客服处理。（工作日9:00
          - 18:00）
        </p>
        <div class="pic">
          <div class="evm">
            <img :src="kf_file_url" alt="" />
            <span>客服微信</span>
          </div>
          <div class="evm">
            <img :src="xcx_file_url" alt="" />
            <span>小程序码</span>
          </div>
        </div>
        <div class="liaojie" @click="reday">我已了解</div>
      </div>
    </el-dialog>

    <!-- 过期弹窗 -->
    <el-dialog
      :visible.sync="isguoqi"
      width="330px"
      center
      top="14%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :show-close="true"
    >
      <div class="guoqiBox">
        <h1>免费试用体验已结束!</h1>
        <h3>若继续体验，请联系客服开通!</h3>
        <img :src="kf_file_url" />
      </div>
    </el-dialog>
    <!-- <div class="guoqi">
      <guoqiTx
        v-if="isguoqi"
        :zykf_file_url="kf_file_url"
        :xzMsg="xzMsg"
        @guoqiClose="guoqiClose"
      ></guoqiTx>
    </div> -->
  </div>
</template>

<script>
import {
  login,
  qiniuconfig,
  wxdlewm,
  upwxdl,
  sendverf,
  sysinfo,
  userinfo,
} from "../../api/http";
import guoqiTx from '../../components/guoqi/guoqitx.vue'
export default {
  components:{
    guoqiTx
  },
  data() {
    return {
      fastLoginRadio: 2, //切换登录方式
      username: "", //账号
      password: "", //密码
      userphone: "", //电话号码
      yzm: "", //验证码
      errorMsgUn: "用户名错误", //用户名错误提示信息
      errorMsgPw: "密码错误", //密码错误提示信息
      errorMsgPn: "手机号错误", //手机号错误提示信息
      errorMsgYz: "验证码错误", //验证码错误提示信息
      errorUn: false, //账号错误提示
      errorPw: false, //密码错误提示
      errorPn: false, //电话号码格式错误提示
      errorYz: false, //验证码错误提示
      loginRadio: 1, //账号或短信切换值
      loginEvm: "", //扫描的登录二维码
      evmTimer: null, //每两秒判断扫码状态
      evmTimer1: null, //每两秒判断扫码状态

      djsShow: false, //重新发送倒计时显示隐藏
      countdown: 60, //短信验证码再次发送倒计时
      dxTimer: null, //重新获取验证码倒计时

      isyouxiao: true, //二维码是否有效

      //新加内容
      isUpdateShow: false, //更新弹窗
      kf_file_url: "", //客服微信
      xcx_file_url: "", //小程序码
      isguoqi: false, //过期显示

      fromRouteName: "", //上一页路由

      copyright:'',//版权信息
      xzMsg:{},
    };
  },
  created() {
    // console.log(this.$route.query);
    //七牛运配置
    // qiniuconfig().then((res)=>{
    //   console.log(res)
    // })
    // 系统信息
    // console.log(this.$route.query, "首页接受参数判断是否弹窗");
    if (this.$route.query.tk) {
      this.isUpdateShow = true;
    } else {
      this.isUpdateShow = false;
    }
    if (this.$route.query.isgq) {
      this.isguoqi = true;
    } else {
      this.isguoqi = false;
    }
    if (this.$route.query.zhanghao) {
      this.fastLoginRadio = 1;
    }
    sysinfo().then((res) => {
      // console.log(res, "右侧悬浮窗");
      this.kf_file_url = res.retRes.kf_file_url;
      this.xcx_file_url = res.retRes.xcx_file_url;
      this.copyright = res.retRes.copyright;
    });
    wxdlewm({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      if (res.retInt == 1) {
        // console.log(res, "登录二维码");
        this.loginEvm = res.retRes.file_url;
        this.evmTimer1 = setInterval(() => {
          upwxdl().then((res) => {
            // console.log(res, "扫码登录状态");
            if (res.retInt == 1 && res.retRes.login_status == 1) {
              if (!this.fromRouteName || this.fromRouteName == "Reset") {
                this.$router.replace("/?" + new Date().getTime());
              } else {
                this.$router.back();
              }
              clearInterval(this.evmTimer1);
              this.evmTimer1 = null;
            } else if (res.retInt == 0) {
              this.isyouxiao = false;
              clearInterval(this.evmTimer);
              this.evmTimer = null;
              clearInterval(this.evmTimer1);
              this.evmTimer1 = null;
            }
          });
        }, 2000);
      }
    });
  },
  mounted() {
    // console.log(document.referrer, "haha");
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      // console.log(from.name);
      vm.fromRouteName = from.name;
    });
  },
  beforeDestroy() {
    clearInterval(this.evmTimer);
    this.evmTimer = null;
  },
  methods: {
    guoqiClose(){
      this.isguoqi =  false
    },
    loginAgain() {
      this.isyouxiao = true;
      wxdlewm({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "登录二维码");
          this.loginEvm = res.retRes.file_url;
          this.evmTimer = setInterval(() => {
            upwxdl().then((res) => {
              console.log(res, "扫码登录状态");
              if (res.retInt == 1 && res.retRes.login_status == 1) {
                if (!this.fromRouteName || this.fromRouteName == "Reset") {
                  this.$router.replace("/?" + new Date().getTime());
                } else {
                  this.$router.back();
                }
                clearInterval(this.evmTimer);
                this.evmTimer = null;
              } else if (res.retInt == 0) {
                this.isyouxiao = false;
                clearInterval(this.evmTimer);
                this.evmTimer = null;
              }
            });
          }, 2000);
        }
      });
    },
    //前往修改密码
    goReset() {
      this.$router.push("/reset");
    },
    //切换到账号短信
    changeZhLogin(){
      clearInterval(this.evmTimer1);
      this.evmTimer1 = null;
      clearInterval(this.evmTimer);
      this.evmTimer = null;
      this.fastLoginRadio = 1;
    },
    //切换账号登录
    changeZh() {
      this.loginRadio = 1;
      const zhanghao = document.getElementsByClassName("zhanghao")[0];
      const duanxin = document.getElementsByClassName("duanxin")[0];
      zhanghao.style.borderBottom = "3px solid #08a579";
      duanxin.style.borderBottom = "0";
    },
    //切换短信登录
    changePhone() {
      this.loginRadio = 2;
      const zhanghao = document.getElementsByClassName("zhanghao")[0];
      const duanxin = document.getElementsByClassName("duanxin")[0];
      duanxin.style.borderBottom = "3px solid #08a579";
      zhanghao.style.borderBottom = "0";
    },
    //切换快速扫码登录
    changeSMLogin() {
      this.fastLoginRadio = 2;
      wxdlewm({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        if (res.retInt == 1) {
          this.loginEvm = res.retRes.file_url;
          // console.log(res, "登录二维码");
          this.loginEvm = res.retRes.file_url;
          clearInterval(this.evmTimer);
          this.evmTimer = setInterval(() => {
            upwxdl().then((res) => {
              // console.log(res, "扫码登录状态");
              if (res.retInt == 1 && res.retRes.login_status == 1) {
                if (!this.fromRouteName || this.fromRouteName == "Reset") {
                  this.$router.replace("/");
                } else {
                  this.$router.back()
                }
                clearInterval(this.evmTimer);
                this.evmTimer = null;
              } else if (res.retInt == 0) {
                this.isyouxiao = false;
                clearInterval(this.evmTimer);
                this.evmTimer = null;
              }
            });
          }, 2000);
        }
      });
    },
    //账号输入框获取焦点
    unFocus() {
      this.errorUn = false;
    },
    //密码输入框获取焦点
    pwFocus() {
      this.errorPw = false;
    },
    //手机号输入框获取焦点
    pnFocus() {
      this.errorPn = false;
    },
    //验证码输入框获取焦点
    yzFocus() {
      this.errorYz = false;
    },
    //账号登录按钮
    zhLogin() {
      console.log(this.fromRouteName, "1231232123123");
      if (this.username.trim() == "") {
        this.errorUn = true;
        this.errorMsgUn = "请填写用户名";
      } else if (this.password == "") {
        this.errorPw = true;
        this.errorMsgPw = "请输入密码";
      } else {
        login({
          account: this.username,
          password: this.password,
        }).then((res) => {
          // console.log(res)
          if (res.retInt != 1) {
            this.$notify.closeAll();
            this.$notify.error({
              title: "错误",
              message: res.retErr,
            });
          } else if (res.retInt == 1) {
            // console.log(document.referrer);
            localStorage.setItem("md5key", res.md5key);
            if (!this.fromRouteName || this.fromRouteName == "Reset") {
              this.$router.replace("/?" + new Date().getTime());
            } else {
              this.$router.back();
            }
          }
        });
      }
    },
    //获取短信验证码
    getDx() {
      //电话号码正则验证，如果通过就发送验证码
      const reg_tel =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      const reg_yzm = /^\d{6}$/;
      if (this.userphone.trim() == "") {
        this.errorPn = true;
        this.errorMsgPn = "请填写手机号";
      } else if (!reg_tel.test(this.userphone)) {
        this.errorPn = true;
        this.errorMsgPn = "手机号格式错误";
      } else {
        //手机号码正常，发送短信验证码并倒计时60秒后才可重新发送
        sendverf({
          phone: this.userphone ? this.userphone : "",
        }).then((res) => {
          if (res.retInt == 1) {
            this.dxTimer = setInterval(() => {
              if (this.countdown > 0 && this.countdown <= 60) {
                this.countdown--;
                if (this.countdown !== 0) {
                  this.djsShow = true;
                  console.log("daojishi");
                } else {
                  this.djsShow = false;
                  this.countdown = 60;
                  clearInterval(this.dxTimer);
                  console.log("倒计时");
                }
              }
            }, 1000);
          }
        });
      }

      //  this.djsShow = true
      // sendverf({
      //   phone:this.userphone?this.userphone:''
      // }).then(res=>{
      //   if(res.retInt == 1){
      //     console.log(res)
      //    if(!this.dxTimer){
      //     this.dxTimer =  setInterval(()=>{
      //       if(this.countdown>0&& this.countdown<=60){
      //           this.countdown --
      //           if(this.countdown !== 0){
      //             this.djsShow = true
      //           }else{
      //             this.djsShow = false
      //             this.countdown  = 60;
      //             this.dxTimer = null;
      //           }
      //         }
      //     },1000)
      //    }
      //   }
      // })
    },
    //短信登录按钮
    dxLogin() {
      //电话号码正则验证
      const reg_tel =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      const reg_yzm = /^[0-9]*$/;
      if (this.userphone.trim() == "") {
        this.errorPn = true;
        this.errorMsgPn = "请填写手机号";
      } else if (!reg_tel.test(this.userphone)) {
        this.errorPn = true;
        this.errorMsgPn = "手机号格式错误";
      } else if (this.yzm.trim() == "") {
        this.errorYz = true;
        this.errorMsgYz = "请输入验证码";
      } else if (!reg_yzm.test(this.yzm)) {
        this.errorYz = true;
        this.errorMsgYz = "验证码错误";
      } else {
        login({
          account: this.userphone,
          msg_verf: this.yzm,
        }).then((res) => {
          // console.log(res)
          if (res.retInt != 1) {
            this.$notify.closeAll();
            this.$notify.error({
              title: "错误",
              message: res.retErr,
            });
          } else if (res.retInt == 1) {
            console.log(res);
            if (!document.referrer) {
              this.$router.replace("/?" + new Date().getTime());
            } else {
              this.$router.back();
            }
          }
        });
      }
    },
    //我知道了
    reday() {
      this.isUpdateShow = false;
    },
  },
};
</script>
<style lang="less" scoped>
html,
body,
#app {
  width: 100%;
  height: 100%;
  .container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    img {
      display: inline-block;
      width: 100%;
    }
    .logo {
      img {
        position: absolute;
        top: 3%;
        left: 5%;
        width: 15.2%;
      }
    }
    .content {
      position: absolute;
      top: 25%;
      right: 8.33%;
      width: 31.25%;
      background: #ffffff;
      box-shadow: 0px 6px 30px 0px rgba(7, 146, 107, 0.2);
      border-radius: 20px;
      .box {
        margin: 10%;
        .title {
          display: flex;
          h2 {
            margin-right: 11.4%;
            line-height: 160%;
            font-size: 22px;
            border-bottom: 3px solid #08a579;
            cursor: pointer;
            user-select: none;
          }
        }
        .right {
          img {
            position: absolute;
            top: 8.3%;
            right: 8.3%;
            width: 8.3%;
            cursor: pointer;
          }
        }
        .login {
          margin-top: 12%;
          /deep/.el-input:first-of-type {
            margin-bottom: 8.5%;
          }
          /deep/.el-input__inner {
            width: 100%;
            height: 50px;
            border: 1px solid #dcdfe6;
          }
          /deep/.el-input__icon {
            line-height: 50px;
          }
          /deep/.el-input {
            width: 100%;
          }
          .getYzm {
            position: absolute;
            top: 50%;
            right: 18%;
            font-size: 14px;
            color: #999999;
            cursor: pointer;
            user-select: none;
          }
          .forget {
            position: absolute;
            top: 60%;
            right: 10%;
            font-size: 14px;
            color: #999999;
            cursor: pointer;
            user-select: none;
          }
          .submit {
            margin-top: 25.5%;
            width: 100%;
            height: 50px;
            background: linear-gradient(270deg, #4ceabe, #1dbc8d);
            border-radius: 6px;
            font-size: 16px;
            text-align: center;
            line-height: 50px;
            color: #fff;
            cursor: pointer;
            user-select: none;
          }
          .errorMsg1 {
            position: absolute;
            top: 40%;
            left: 11%;
            color: red;
          }
          .errorMsg2 {
            position: absolute;
            top: 57%;
            left: 11%;
            color: red;
          }
        }
      }
      .box1 {
        .title {
          h2:last-child {
            border: 0;
          }
        }
      }
      .box2 {
        .evm {
          position: relative;
          margin-top: 12%;
          text-align: center;
          width: 100%;
          height: 100%;
          img {
            width: 62.5%;
            height: 62.5%;
          }
          .sxzz {
            position: relative;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            width: 62.5%;
            height: 100%;
            background-color: #000;
            opacity: 0.7;
            // background-color: rgb(36 32 32 / 96%);
          }
          p {
            position: absolute;
            top: 45%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            color: #fff;
          }
        }
        p {
          // position: relative;
          // top: -100px;
          text-align: center;
          margin-top: 5%;
          font-size: 12px;
          color: #999999;
        }
        .again {
          a {
            cursor: pointer;
            user-select: none;
            text-decoration: underline;
          }
        }
      }
    }
    .bottom {
      position: fixed;
      bottom: 20px;
      width: 100%;
      text-align: center;
      font-size: 12px;
      color: #666;
    }
    /deep/.el-dialog--center {
      border-radius: 10px;
    }
    /deep/.el-dialog__header {
      padding: 0;
    }
    //首页更新提醒弹窗
    .upDateBox {
      position: relative;
      padding-bottom: 80px;
      h3 {
        margin-bottom: 30px;
        font-size: 16px;
        text-align: center;
        color: #333;
      }
      p {
        margin: 0 auto;
        font-size: 12px;
        width: 400px;
        line-height: 20px;
        color: #666;
      }
      .pic {
        margin-top: 40px;
        display: flex;
        justify-content: space-around;
        .evm {
          display: flex;
          flex-direction: column;
          align-items: center;
          // justify-content: center;
          width: 120px;
          img {
            margin-bottom: 20px;
            width: 120px;
            height: 120px;
          }
          p {
            text-align: center;
          }
        }
      }
      .liaojie {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        width: 120px;
        height: 36px;
        background-color: #08a579;
        text-align: center;
        color: #fff;
        line-height: 36px;
        font-size: 14px;
        border-radius: 4px;
        cursor: pointer;
      }
    }
    //过期弹窗
    .guoqiBox {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      width: 280px;
      // height: 366px;
      // background-image: url('../../assets/img/guoqi.png');
      background-size: 100%;
      h1 {
        margin-top: 10px;
        text-align: center;
        font-size: 24px;
        color: #333;
      }
      h3 {
        margin-top: 10px;
        text-align: center;
        font-size: 16px;
        color: #999;
      }
      img {
        margin-top: 20px;
        width: 200px;
        height: 200px;
      }
    }
  }
}
</style>